.carousel {
  position: relative;
}

.carousel__items {
  display: flex;
  transition: transform 500ms cubic-bezier(0.83, 0, 0.17, 1);
  will-change: transform;

  @media (prefers-reduced-motion) {
    transition: none;
  }
}

.carousel__item {
}

.carousel__item__content {
  transition: transform 500ms cubic-bezier(0.83, 0, 0.17, 1);

  @media (prefers-reduced-motion) {
    transition: none;
  }
}

.carousel__item--current .carousel__item__content {
  transform: scale(1);
  opacity: 1;
}

.carousel__next,
.carousel__previous {
  position: absolute;
  top: calc(50% - 50px);
  z-index: $z-carousel-buttons;
  backface-visibility: hidden; // hack to create a new layer. Essential performance fix.
  z-index: 99;
}

.carousel__previous {
  left: -1rem;
}

.carousel__next {
  right: -1rem;
}

.carousel__previous__button,
.carousel__next__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75px;
  width: 40px;
  padding: 0;
}

.carousel__pages {
  border-top: #737381 1px solid;
  border-bottom: #000 1px solid;
  position: absolute;
  bottom: 15px;
  left: 20px;
  display: flex;
  list-style-type: none;
  margin: 0.5rem 0 0 0;
  padding: 0 3px;
  background: #434343;
  border-radius: 4px;
}

.carousel__page {
  text-indent: -500px;
  overflow: hidden;
  display: block;
  padding: 3px 3px;
  font-size: 1px;
  line-height: 1px;
}

.carousel__page__indicator {
  content: '';
  display: block;
  width: 35px;
  height: 6px;
  background: rgb(27, 27, 27);
  border-radius: 3px;
  box-shadow: inset rgba(0, 0, 0, 0.5) 0px 1px 2px, rgba(255,255,255,0.25) 0 0 2px;
}

.carousel__page--current .carousel__page__indicator {
  background: white;
}